<template>
  <ContentWrap>
    <div class="tongue-basic-config">
      <el-form label-position="left" label-width="120px">
        <el-form-item label="插件开关">
          <el-switch v-model="formData.pluginSwitch" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <!-- 小程序路径和H5链接 -->
        <div class="url-row">
          <div class="url-item">
            <span class="text-right">小程序路径地址</span>
            <el-input v-model="formData.appletUrl"  :disabled="true"/>
            <el-button @click="copyToClipboard(formData.appletUrl)">复制</el-button>
          </div>
        </div>
        <div class="url-row">
          <div class="url-item">
            <span class="text-right">H5 路径</span>
            <el-input v-model="formData.h5Url" />
            <el-button @click="copyToClipboard(formData.h5Url)">复制</el-button>
          </div>
        </div>
        <!-- 智能咨询介绍 -->
        <div class="editor-section">
          <div class="editor-title">兑换中间</div>
          <div class="editor-container">
            <Editor v-model="formData.exchangePage" :height="300" />
          </div>
        </div>
        <!-- 提交按钮 -->
        <div class="form-actions">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-form>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Editor } from '@/components/Editor'
import { PhysicalBasicApi } from '@/api/allApplication/physical/index'
onMounted(() => {
  getDetail()
})
// 表单数据
const formData = ref({
  pluginSwitch: 0,
  h5Url: '',
  appletUrl:'/pages/physical/index',
  exchangePage: '',
})

const copyToClipboard = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage({
      message: '复制成功',
      type: 'success'
    })
  })
}
const getDetail = async () => {
  PhysicalBasicApi.getPhysicalBasic().then((res: any) => {
    if (res) {
      formData.value = res,
      formData.value.appletUrl = res.appletUrl || '/pages/physical/index'
    }
  }).catch((err: any) => {
    console.log(err)
  })
}

// 提交表单
const submitForm = () => {
  PhysicalBasicApi.setPhysicalBasic(formData.value).then((res: any) => {
    ElMessage({
      message: '提交成功',
      type: 'success'
    })
    getDetail()
  })
}
</script>

<style scoped lang="scss">
.tongue-basic-config {
  padding: 20px 0;
  .el-form {
    padding: 24px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 5%);
  }

  .el-form-item {
    margin-bottom: 22px;
  }

  .purchase-methods {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 10px;
  }

  .purchase-method {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px;
    background-color: #f8f9fa;
    border-radius: 6px;

    .el-checkbox {
      width: 70px;
    }

    .purchase-inputs {
      display: flex;
      gap: 20px;
    }

    .input-item {
      display: flex;
      align-items: center;
      gap: 10px;

      .input-label {
        width: 40px;
        color: #606266;
      }

      .el-input {
        width: 150px;
      }
    }
  }

  .url-row {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;

    .url-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background-color: #f8f9fa;
      border-radius: 6px;

      span {
        font-size: 14px;
        color: #606266;
        white-space: nowrap;
      }

      .el-input {
        flex: 1;
      }

      .el-button {
        margin-left: 5px;
      }
    }
  }

  .input-with-unit {
    display: flex;
    align-items: center;
    gap: 12px;

    .unit {
      color: #606266;
    }
  }


  .editor-section {
    padding: 20px;
    margin: 30px 0;
    background-color: #f8f9fa;
    border-radius: 8px;

    .editor-title {
      padding-bottom: 12px;
      margin-bottom: 16px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      border-bottom: 1px solid #ebeef5;
    }

    .editor-container {
      overflow: hidden;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
  }

  .form-actions {
    display: flex;
    padding-top: 24px;
    margin-top: 40px;
    border-top: 1px solid #ebeef5;
    justify-content: center;

    .el-button {
      padding: 12px 30px;
      font-size: 16px;
    }
  }
}
</style>